<template>
<div class="app">
    <div class="header">        
      <div class="heade"><van-icon name="arrow-left" /></div>
      <div class="head">门牌号</div>
      <div class="hear"></div>
    </div>
    <div class="footer">
        <van-search v-model="value" placeholder="请输入门牌号" />
    </div>
    <div class="list-title">您可直接选择</div>
    <div class="result-list">
            <ul>
                <li class="item">安 庆</li>
                <li class="item">安 庆</li>
                <li class="item">安 庆</li>
            </ul>
    </div> 
    <div class="handle-input">手动输入楼栋号</div>       
</div>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';
import { Search } from 'vant';
import { Toast } from 'vant';
Vue.use(Icon);
Vue.use(Search);
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('完成');
    },
  },
};
</script>
<style lang='stylus'>
body
  background-color rgb(245 245 249)
.header
  border-bottom  solid 1px #d9d9d9
  background-color #fff 
  font-size .2rem
  font-weight bolder
  display flex 
  padding .17rem .17rem
  color: #000
  height .6rem
  display: flex;
  align-items: center;
  justify-content: center
  
.head
  width 100%
.heade
  width 100%
.hear
  width 100%
.van-search
  background-color rgb(245 245 249)
.van-cell
  background-color #fff
.van-field__control
  background-color #fff
.van-search__content 
  background-color #fff
.van-search__action
  color #3072f6
  background-color #f1f1f1
.footer
  padding 0 .1rem

.item
    border-bottom: 1px solid #e6e6e6;
    color: #333;
    line-height: 12vw;
    
.result-list
    padding 0 .2rem
    font-size .13rem
    background-color #fff

.list-title
    color: #999;
    font-weight: 400;
    padding: 0 2.667vw 2.667vw;

.handle-input
    width: 50%;
    border: 1px solid #ccc;
    margin: 5.333vw auto;
    height: 10.667vw;
    line-height: 10.667vw;
    color: #999;
    font-size: 3.2vw;
    text-align: center;
</style>